<script setup lang="ts">
import type { IndicatorInfo } from '../type'
import { debounce } from 'lodash-es'
import { indicatorApi } from '~/api'

const emit = defineEmits<{
  (e: 'clickItem', item: IndicatorInfo): void
}>()

const indicatorNumber = defineModel<string>({ required: true })
const indicatorList = ref<IndicatorInfo[]>([])
const pagination = reactive({
  pageNumber: 1,
  pageSize: 20,
  total: 0,
})
const loading = ref(false)
const visible = ref(false)

const getIndicatorList = debounce(_getIndicatorList, 500)
async function _getIndicatorList(str: string) {
  loading.value = true
  try {
    const { data } = await indicatorApi.queryIndicatorsByPage({
      pageNumber: pagination.pageNumber,
      pageSize: pagination.pageSize,
      containSub: 1,
      keyword: str,
      pointId: 1,
    })
    indicatorList.value = data.records ?? []
    pagination.total = data.total ?? 0
  }
  finally {
    loading.value = false
  }
}

async function handlePageChange() {
  await nextTick()
  await _getIndicatorList(indicatorNumber.value)
}

async function handleTrigger() {
  pagination.pageNumber = 1
  await nextTick()
  await _getIndicatorList(indicatorNumber.value)
  visible.value = true
}

async function handleClickItem(item: IndicatorInfo) {
  indicatorNumber.value = item.indicatorNumber
  visible.value = false
  emit('clickItem', item)
}
</script>

<template>
  <ElPopover
    :visible="visible"
    placement="bottom-start"
    :width="400"
    popper-style="--ep-popover-padding: 0;"
  >
    <template #reference>
      <ElInput
        v-model="indicatorNumber"
        placeholder="请选择指标，支持关键字搜索"
        clearable
        @input="getIndicatorList"
        @click.stop="handleTrigger"
      />
    </template>
    <div v-loading="loading" element-loading-custom-class="global-loading" class="max-h-100 w-full flex flex-col">
      <div v-if="indicatorList.length > 0" class="flex-auto overflow-auto" style="scrollbar-width: thin;">
        <div
          v-for="item in indicatorList" :key="item.indicatorNumber"
          class="indicator-item flex cursor-pointer items-center px-3 py-2 transition-all hover:bg-[rgba(255,255,255,0.05)]"
          :class="{ active: indicatorNumber === item.indicatorNumber }"
          @click.stop="handleClickItem(item)"
        >
          <span v-if="item.toolName">{{ item.toolName }}-</span>
          <span>{{ item.indicatorName }}</span>
          <span class="ml-auto text-sm opacity-80">{{ item.indicatorNumber }}</span>
        </div>
      </div>
      <div v-else class="flex items-center justify-center p-4 text-sm opacity-50">
        暂无数据
      </div>
      <div v-if="indicatorList.length > 0" class="flex flex-shrink-0 items-center justify-end p-3">
        <ElPagination
          v-model:current-page="pagination.pageNumber"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          background size="small"
          layout="total, prev, pager, next"
          :pager-count="5"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </ElPopover>
</template>

<style scoped lang="scss">
.indicator-item {
  &.active {
    color: var(--ep-color-primary);
    font-weight: 600;
  }
}
</style>
